<template>
	<view>
		<view class="tab-nav ">
			<view class=" tab-list-item" v-for="(item,index) in toggleList" :key="index"
				@click="clickToggleHandle(item,index)">
				<view :class="{ active: indexs==index}" class="text">{{ item.label }}</view>
				<view class="line" v-if="indexs==index">
				</view>
			</view>
		</view>
		<view class="navwrap" v-if="indexs==0">
			<view class="wrapitem">
				<view class="wrapitemtit">
					累计发出数量
				</view>
				<view class="num">
					{{info.send_data.count}}
				</view>
			</view>
			<view class="wrapitem">
				<view class="wrapitemtit">
					累计发出金额
				</view>
				<view class="num">
					{{info.send_data.amount}}
				</view>
			</view>
			<view class="wrapitem">
				<view class="wrapitemtit">
					累计过期返还
				</view>
				<view class="num">
					{{info.send_data.expired_amount}}
				</view>
			</view>
			<view class="wrapitem">
				<view class="wrapitemtit">
					红包累计锁粉
				</view>
				<view class="num">
					{{info.send_data.newer_count}}
				</view>
			</view>
		</view>
		<view class="navwrap" v-if="indexs==1" style="flex-wrap: nowrap;">
			<view class="wrapitem2">
				<view class="wrapitemtit">
					累计领取数量
				</view>
				<view class="num">
					{{info.rob_data.count}}
				</view>
			</view>
			<view class="wrapitem2">
				<view class="wrapitemtit">
					累计领取金额
				</view>
				<view class="num">
					{{info.rob_data.amount}}
				</view>
			</view>
			<view class="wrapitem2">
				<view class="wrapitemtit">
					手气最佳次数
				</view>
				<view class="num">
					{{info.rob_data.best_count}}
				</view>
			</view>
		</view>
		<view class="lists" v-if="indexs==0">
			<view class="tab-nav " style="width: 690rpx;">
				<view class=" tab-list-item" v-for="(item,index) in toggleList2" :key="index"
					@click="clickToggleHandle2(item,index)">
					<view :class="{ active: indexs2==index}" class="text">{{ item.label }}</view>
				</view>
			</view>
			<view class="listsitem" v-if="indexs2==0" v-for="item in lists" :key="item.id"  @click="gosendOut(item.id)">
				<view class="listsitemtop">
					<view class="name">
						{{item.type_red==1?"拼手气红包":"普通红包"}}
					</view>
					<view class="money">
						<image :src="baseUrl +'/static/icon/card1.png'" mode="aspectFill"></image>
						<text>{{item.more_amount}}</text>
					</view>
				</view>
				<view class="listsitemtop">
					<view class="time">
						{{item.create_time}}
					</view>
					<view class="time">
						共{{item.number}}个
						<text v-if="item.expire_number!=0">过期{{item.expire_number}}个</text>
					</view>
				</view>
			</view>
			<noDatas :xxxList="lists" v-if="indexs==0&&indexs2==0" :status="status"></noDatas>
			<view class="listsitem2" v-if="indexs2==1" v-for="item in lists2" :key="item.id">
				<view class="lefts">
					<image class="img" :src="item.user.avatar" mode="aspectFill"></image>
					<view class="leftstop">
						<view class="name">
							{{item.user.nickname}}
						</view>
						<view class="time" style="margin-top: 10rpx;">
							{{item.create_time}}
						</view>
					</view>
				</view>
				<view class="rights">
					领取金额 <text>{{item.amount}}</text>
				</view>
			</view>
			<noDatas :xxxList="lists2" v-if="indexs2==1" :status="status2"></noDatas>
		</view>
		<view class="lists" v-if="indexs==1">
			<view class="tit">
				红包记录
			</view>

			<view class="listsitem2" v-for="item in lists" :key="item.id">
				<view class="lefts">
					<!-- <image class="img" src="/static/image/shareapliay.png" mode=""></image> -->
					<view class="leftstop">
						<view class="name" style="margin-bottom: 16rpx;">
							{{item.name}}
							<image class="tag" v-if="item.type_red==1"
								src="https://images.fudiemall.com/storage/default/20250627/pin06b91c8d9ca48e37e4191523462c1d5d4aee193c.png"
								mode="aspectFill"></image>
						</view>
						<view class="time">
							{{item.create_time}}
						</view>
					</view>
				</view>
				<view class="money">
					<image :src="baseUrl +'/static/icon/card1.png'" mode="aspectFill"></image>
					<text>{{item.more_amount}}</text>
				</view>
			</view>
			<noDatas :xxxList="lists" v-if="indexs==1" :status="status"></noDatas>
		</view>
		<view class="empty3">

		</view>
		<u-popup :show="tipShow" @close="tipShow=false" :round="10" :closeable="true">
			<view class="boxsd">
				<view class="boxsditem" style="margin-top: 80rpx;">
					<view class="content">
						制作专属红包链接，可一键转发给微信用户、微信群、微信朋友圈。新用户注册领取红包后，锁定推荐关系
					</view>
					<view class="btn2" @click="gonext">
						外发红包
					</view>
				</view>
				<view class="boxsditem">
					<view class="content">
						红包只能发在福叠猫平台自有群聊内，不支持平台外转发
					</view>
					<view class="btn2" @click="goselect">
						群内红包
					</view>
				</view>
			</view>
		</u-popup>
		<view class="btn" @click="tipShow=true">
			我要发红包
		</view>
	</view>
</template>

<script>
	import {
		dashboard,
		list,
		fans
	} from "../../api/red.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				toggleList: [{
						label: '我发出的红包',
						statusval: "",
						select: true
					},
					{
						label: '我领取的红包',
						statusval: "1",
						select: false
					},


				],
				indexs: 0,
				toggleList2: [{
						label: '红包记录',
						statusval: "",
						select: true
					},
					{
						label: '锁粉记录',
						statusval: "1",
						select: false
					},


				],
				indexs2: 0,
				tipShow: false,
				info: {

					rob_data: {},
					send_data: {

					}
				},
				page2: 1,
				lists2: [
					
				],
				size2: 20,
				status2: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				page: 1,
				lists: [
					{
						red:{}
					}
				],
				size: 20,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
			}
		},
		onLoad() {
			this.getinfo()
			this.getlist()

		},
		methods: {
			gosendOut(id){
				uni.navigateTo({
					url:"/pageUser/redEnvelope/sendOut?id="+id
				})
			},
			getlist() {
				list({
					type: Number(this.indexs + 1),
					page: this.page,
					page_size: this.size,
				}).then(res => {
					if (res.code == 1) {
						let list = res.data.data;

						this.lists = this.page == 1 ? list : this.lists.concat(list);
						console.log(this.lists);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
					console.log(res)
				})
			},
			getlist2() {
				fans({
					page: this.page2,
					page_size: this.size2,
				}).then(res => {
					if (res.code == 1) {
						let list = res.data.data;

						this.lists2 = this.page == 1 ? list : this.lists2.concat(list);
						console.log(this.lists2);
						if (list.length < this.size2) this.status2 = 'nomore';
						else this.status2 = 'loading';
					}
					console.log(res)
				})
			},
			getinfo() {
				dashboard().then(res => {
					this.info = res.data
				})
			},
			goselect() {
				this.tipShow = false
				uni.navigateTo({
					url: "/pageUser/redEnvelope/selectgroup"
				})
			},
			gonext() {
				this.tipShow = false
				uni.navigateTo({
					url: "/pageUser/redEnvelope/giveRedEnvelope?type=2"
				})
			},

			clickToggleHandle(ele, index) {
				this.indexs = index
				this.toggleList.forEach(item => item.select = false)
				// this.currLabel = ele.label
				ele.select = true
				this.page = 1
				this.getlist()
			},
			clickToggleHandle2(ele, index) {
				console.log(ele)
				this.indexs2 = index
				this.toggleList2.forEach(item => item.select = false)
				// this.currLabel = ele.label
				ele.select = true
				if (this.indexs2 == 0) {
					this.page = 1
					this.getlist()
				} else {
					this.page2 = 1
					this.getlist2()
				}
			},
		},
		onReachBottom() {
			if(this.indexs==0||this.indexs==1){
				if (this.status != 'nomore') {
					this.page = this.page + 1
					this.getlist()
				}
			}
			if(this.indexs2==1&&this.indexs==0){
				if (this.status2 != 'nomore') {
					this.page2 = this.page2 + 1
					this.getlist2()
				}
			}
			console.log('触底加载');
			
		}
	}
</script>

<style lang="scss">
	.tab-nav {
		width: 750rpx;
		height: 80rpx;
		// background-color: #fff;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		// position: fixed;
		padding: 0 34rpx;
		z-index: 999;
		// justify-content: space-around;

		.tab-list-item {
			position: relative;
			margin-right: 72rpx;

			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx;
				opacity: 1;
				font-weight: 500;
				text-align: center;
				font-size: 32rpx;
				color: #A6A5AF;
				z-index: 99;
				position: relative;
			}

			.active {
				font-weight: 700;
				color: #333333;
				z-index: 98;
				position: relative;
			}

			.line {
				width: 66rpx;
				height: 10rpx;
				background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
				border-radius: 118rpx 118rpx 118rpx 118rpx;
				position: absolute;
				top: 70%;
				left: 50%;
				transform: translate(-50%);
				z-index: 60;
			}
		}
	}

	.navwrap {
		width: 690rpx;
		min-height: 196rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.img {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.wrapitem2 {
		width: 25%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.leftstop {
		margin-left: 10rpx;
	}

	.name {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.wrapitem {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.rights {
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;

		>text {
			padding-left: 10rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFC300;
		}
	}

	.wrapitemtit {
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
	}

	.num {
		font-weight: 700;
		font-size: 32rpx;
		color: #FFC300;
		margin-top: 20rpx;
	}

	.lists {
		width: 690rpx;
		min-height: 1098rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 24rpx;
	}

	.listsitem {
		width: 642rpx;
		height: 138rpx;
		border-bottom: 2rpx solid #F7F7F7;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.tit {
		padding-top: 30rpx;
		margin-left: 30rpx;
	}

	.tag {
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;

	}

	.listsitem2 {
		width: 642rpx;
		height: 138rpx;
		border-bottom: 2rpx solid #F7F7F7;
		margin: 0 auto;
		display: flex;
		// flex-direction: column;
		// justify-content: center;
		justify-content: space-between;
		align-items: center;
	}

	.listsitemtop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.money {
		display: flex;
		align-items: center;

		>image {
			width: 24rpx;
			height: 20rpx;
		}

		>text {
			font-weight: 500;
			font-size: 32rpx;
			color: #FFC300;
			margin-left: 10rpx;
		}
	}

	.time {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.lefts {
		display: flex;

	}

	.btn {
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(270deg, #FA2222 2%, #FFC400 98%);
		border-radius: 138rpx 138rpx 138rpx 138rpx;
		position: fixed;
		left: 50%;
		bottom: 50rpx;
		transform: translateX(-50%);
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
	}

	.boxsd {
		width: 750rpx;
		height: 822rpx;

	}

	.content {
		width: 616rpx;
		height: 138rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 32rpx;
		color: #3D3D3D;
		line-height: 46rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.boxsditem {
		width: 690rpx;
		height: 328rpx;
		background: #FFF3F3;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 2rpx solid #FEF3E2;
		margin: 0 auto;
		margin-top: 50rpx;
		padding-bottom: 40rpx;
	}

	.btn2 {
		width: 616rpx;
		height: 80rpx;
		background: linear-gradient(180deg, #FF5959 0%, #F63933 99%);
		border-radius: 236rpx 236rpx 236rpx 236rpx;
		border: 4rpx solid;
		text-align: center;
		line-height: 80rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFE8D8;
		margin: 0 auto;
		margin-top: 20rpx;

	}
</style>